export default {
    data: {
        interval: null,     // 定时器对象
        showText: true,     // 是否显示文本
        textOn: "动态",
        textOff: "静态",
        progressData: {
            startColor: '#f7ce00',
            endColor: '#f99b11',
            value: 30
        },
        loadingData: {
            startColor: '#a2a2b0',
            endColor: '#8e8e93'
        },
        rainbowData: [
            { startColor: '#d1a738', endColor: '#eb933d', value: 10 },
            { startColor: '#e67d50', endColor: '#d9542b', value: 10 },
            { startColor: '#d5749e', endColor: '#d6568d', value: 10 },
            { startColor: '#9973d1', endColor: '#5552d9', value: 10 },
            { startColor: '#7977d9', endColor: '#f99b11', value: 10 }
        ],
        lineData: [
            {
                strokeColor: '#0081ff',
                fillColor: '#cce5ff',
                data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791],
                gradient: true,
            }
        ],
        lineOps: {
            xAxis: {
                min: 0,
                max: 20,
                display: false,
            },
            yAxis: {
                min: 0,
                max: 1000,
                display: false,
            },
            series: {
                lineStyle: {
                    width: "5px",
                    smooth: true,
                },
                headPoint: {
                    shape: "circle",
                    size: 20,
                    strokeWidth: 5,
                    fillColor: '#ffffff',
                    strokeColor: '#007aff',
                    display: true,
                },
                loop: {
                    margin: 2,
                }
            }
        }
    },
    onInit() {

    },
    change(e) {
        if (e.checked) {
            this.interval = setInterval(() => {
                this.changeProgress();      // 更新进度类圆形图表
                this.changeLoading();       // 更新加载类圆形图表
                this.changeRainbow();       // 更新占比类圆形图表
                this.changeLine();          // 更新线形图表
            }, 1000);
        }else {
            clearInterval(this.interval);
            this.progressData = {
                startColor: '#f7ce00',
                endColor: '#f99b11',
                value: 30
            };
        }
    },
    // 更新进度类圆形图表
    changeProgress() {
        this.progressData = {
            startColor: '#f7ce00',
            endColor: '#f99b11',
            value: 80
        };
    },
    // 更新加载类圆形图表
    changeLoading() {
        this.loadingData = {
            startColor: '#91c23a',
            endColor: '#70ba5d'
        };
    },
    // 更新占比类圆形图表
    changeRainbow() {
        this.rainbowData = [
            { startColor: '#d1a738', endColor: '#eb933d', value: 10 },
            { startColor: '#e67d50', endColor: '#d9542b', value: 10 },
            { startColor: '#d5749e', endColor: '#d6568d', value: 10 },
            { startColor: '#9973d1', endColor: '#5552d9', value: 10 },
            { startColor: '#7977d9', endColor: '#f99b11', value: 10 },
            { startColor: '#4c81d9', endColor: '#217bd9', value: 10 },
            { startColor: '#5ea6d1', endColor: '#4895c2', value: 10 },
            { startColor: '#91c23a', endColor: '#70ba5d', value: 10 },
            { startColor: '#8c8c99', endColor: '#6b6b76', value: 10 }
        ];
    },
    // 更新线形图表
    changeLine() {
        this.$refs.linechart.append({
            serial: 0,
            data: [Math.floor(Math.random() * 400) + 400]
        })
    }
}
